import React from 'react'
import {withRouter} from 'react-router-dom'
import  {TabBar } from  'antd-mobile'
import  './MainTabBar.css'
@withRouter
class MainTabBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'redTab',
            hidden: false,
            fullScreen: true,
            homeIcon:require('./img/home.png'),
            homeIconSelected:require('./img/home_selected.png'),
            classIcon:require('./img/class.png'),
            classIconSelected:require('./img/class_selected.png'),
            offlineIcon:require('./img/offline.png'),
            offlineIconSelected:require('./img/offline_selected.png'),
            carIcon:require('./img/car.png'),
            carIconSelect:require('./img/car.png'),
            myIcon:require('./img/my.png'),
            myIconSelected:require('./img/my_selected.png'),
        };
    }

    renderContent(pageText) {
        return (
            <div style={{ backgroundColor: 'red', height: '100%', textAlign: 'center' }}>

            </div>
        );
    }

    render() {
        return (
            <div style={this.state.fullScreen ? { position: 'fixed', width: '100%', bottom: 0 } : { height: 400 }}>
                <TabBar
                    unselectedTintColor="#7a7e83"
                    tintColor="#F4A23D"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    <TabBar.Item
                        title="首页"
                        key="Home"
                        icon={<div style={{
                            width: '25px',
                            height: '25px',
                            background: 'url('+this.state.homeIcon+') center center /  25px 25px no-repeat' }}
                        />
                        }
                        selectedIcon={<div style={{
                            width: '25px',
                            height: '25px',
                            background: 'url('+this.state.homeIconSelected+') center center /  25px 25px no-repeat' }}
                        />
                        }
                        selected={this.state.selectedTab === 'redTab'}
                        onPress={() => {

                            this.props.history.push('/index')
                            this.setState({
                                selectedTab: 'redTab',
                            });
                        }}
                        data-seed="logId"
                    >
                        {/*{this.renderContent('Home')}*/}
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '25px',
                                height: '25px',
                                background: 'url('+this.state.classIcon+') center center /  25px 25px no-repeat' }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '25px',
                                height: '25px',
                                background: 'url('+this.state.classIconSelected+') center center /  25px 25px no-repeat' }}
                            />
                        }
                        title="分类"
                        key="Class"
                        selected={this.state.selectedTab === 'blueTab'}
                        onPress={() => {
                            window.location.href="/class.php?title=类目&menu=2"
                            this.setState({
                                selectedTab: 'blueTab',
                            });
                        }}
                        data-seed="logId1"
                    >
                        {/*{this.renderContent('Class')}*/}
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '25px',
                                height: '25px',
                                background: 'url('+this.state.offlineIcon+') center center /  25px 25px no-repeat' }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '25px',
                                height: '25px',
                                background: 'url('+this.state.offlineIconSelected+') center center /  25px 25px no-repeat' }}
                            />
                        }
                        title="联盟"
                        key="Offline"
                        selected={this.state.selectedTab === 'greenTab'}
                        onPress={() => {
                            window.location.href="storelist.php?menu=3"
                            this.setState({
                                selectedTab: 'greenTab',
                            });
                        }}
                    >
                        {/*{this.renderContent('Offline')}*/}
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '25px',
                                height: '25px',
                                background: 'url('+this.state.carIcon+') center center /  25px 25px no-repeat' }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '25px',
                                height: '25px',
                                background: 'url('+this.state.carIconSelect+') center center /  25px 25px no-repeat' }}
                            />
                        }
                        title="购物车"
                        key="car"
                        selected={this.state.selectedTab === 'yellowTab'}
                        onPress={() => {
                            window.location.href="shopping_vehicle.php?menu=4"
                            this.setState({
                                selectedTab: 'yellowTab',
                            });
                        }}
                    >
                        {/*{this.renderContent('Car')}*/}
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '25px',
                                height: '25px',
                                background: 'url('+this.state.myIcon+') center center /  25px 25px no-repeat' }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '25px',
                                height: '25px',
                                background: 'url('+this.state.myIconSelected+') center center /  25px 25px no-repeat' }}
                            />
                        }
                        title="我的"
                        key="Mine"
                        selected={this.state.selectedTab === 'blackTab'}
                        onPress={() => {
                            window.location.href="mine.php?menu=5"
                            //this.props.history.push('')
                            this.setState({
                                selectedTab: 'blackTab',
                            });
                        }}
                    >
                        {/*{this.renderContent('Mine')}*/}
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}


export default MainTabBar